{% extends "base.html" %}
{% block content %}
<style>
    .stat-card {
        background-color: #f5f5f5;
        padding: 20px;
        border-radius: 5px;
        text-align: center;
        margin-bottom: 20px;
        border: 1px solid #ddd;
    }
    .stat-card h2 {
        font-size: 2.5em;
        color: #337ab7;
    }
    .stat-card p {
        font-size: 1.2em;
        color: #555;
    }
</style>

<div class="container">
    <h1>数据分析仪表盘</h1>
    <p>欢迎, {{ current_user.username }}!</p>

    <div class="row">
        <div class="col-md-6">
            <div class="stat-card">
                <h2>{{ total_reports }}</h2>
                <p>总报告数量</p>
            </div>
        </div>
        <div class="col-md-6">
            <div class="stat-card">
                <h2>{{ total_engineers }}</h2>
                <p>总工程师数量</p>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">部门数据概览</h3>
                </div>
                <div class="panel-body">
                    <div id="department-chart" style="width: 100%; height: 400px;"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">近12个月报告数量趋势</h3>
                </div>
                <div class="panel-body">
                    <div id="monthly-trend-chart" style="width: 100%; height: 400px;"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">工程师详细数据</h3>
                </div>
                <div class="panel-body">
                    <table class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>工程师</th>
                                <th>部门</th>
                                <th>报告数量</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for engineer in engineer_data_table %}
                            <tr>
                                <td>{{ engineer.name }}</td>
                                <td>{{ engineer.department }}</td>
                                <td>{{ engineer.reports }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">前20位出具证书数量最多的工程师</h3>
                </div>
                <div class="panel-body">
                    <div id="top-engineers-chart" style="width: 100%; height: 500px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
<script>
    // Department Chart
    var departmentChart = echarts.init(document.getElementById('department-chart'));
    var departmentData = JSON.parse('{{ department_chart_data|safe }}');
    departmentChart.setOption({
        tooltip: { trigger: 'axis' },
        legend: { data: ['报告数量', '工程师数量'] },
        xAxis: { type: 'category', data: departmentData.names },
        yAxis: { type: 'value' },
        series: [
            { name: '报告数量', type: 'bar', barWidth: '20%', data: departmentData.report_counts, itemStyle: { color: '#337ab7' } },
            { name: '工程师数量', type: 'bar', barWidth: '20%', data: departmentData.engineer_counts, itemStyle: { color: '#5cb85c' } }
        ]
    });

    // Monthly Trend Chart
    var monthlyTrendChart = echarts.init(document.getElementById('monthly-trend-chart'));
    var monthlyTrendData = JSON.parse('{{ monthly_report_trend|safe }}');
    monthlyTrendChart.setOption({
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: monthlyTrendData.labels },
        yAxis: { type: 'value' },
        series: [{
            name: '报告数量',
            type: 'line',
            data: monthlyTrendData.data,
            itemStyle: { color: '#d9534f' },
            areaStyle: {}
        }]
    });
    
    // Top Engineers Chart
    var topEngineersChart = echarts.init(document.getElementById('top-engineers-chart'));
    var topEngineersData = JSON.parse('{{ top_20_engineers|safe }}');
    topEngineersChart.setOption({
        tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'shadow' }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            name: '证书数量',
            axisLabel: { rotate: 0 }
        },
        yAxis: {
            type: 'category',
            data: topEngineersData.map(item => item.name),
            axisLabel: {
                formatter: function(value) {
                    return value.length > 4 ? value.substring(0,4) + '...' : value;
                }
            }
        },
        series: [{
            name: '证书数量',
            type: 'bar',
            data: topEngineersData.map(item => item.certificates),
            itemStyle: {
                color: function(params) {
                    var colorList = ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622','#bda29a','#6e7074','#546570','#c4ccd3'];
                    return colorList[params.dataIndex % colorList.length];
                }
            },
            label: {
                show: true,
                position: 'right',
                formatter: '{c}'
            }
        }]
    });
</script>
{% endblock %}
